<template>
    <div class="gjqy fhgc">
        <div class="fontGjqy">
            <span style="padding: 14px 0 0px 0">演习情况{{TableShow?"":`/${tyclId?"编辑":"添加"}数据`}}</span>
        </div>
        <div class="redwTable" v-if="TableShow">
            <div class="buttonBox">
                <el-button
                        style="margin-right: 10px"
                        class="btnDefault cursor"
                        @click="showGJQYSelect"
                >添加数据
                </el-button>
                <el-button class="btnDefault cursor" @click="DelectSelectRow">批量删除</el-button>
            </div>
            <div class="right_one_body table">
                <el-table
                        :data="sliceData"
                        border
                        highlight-current-row
                        row-key="yxqkid"
                        style="width: 100%"
                        @selection-change="selectionChange"
                >
                    <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
                    <el-table-column prop="yxlxmc" label="演习类型"></el-table-column>
                    <el-table-column prop="yxnr" label="演习内容"></el-table-column>
                    <el-table-column prop="yxkssj" label="开始时间"></el-table-column>
                    <el-table-column prop="yxjssj" label="结束时间"></el-table-column>
                    <el-table-column prop="cyrs" label="参训人次"></el-table-column>
                    <el-table-column prop="yxpj" label="演习评价"></el-table-column>
                    <el-table-column prop="bz" label="备注"></el-table-column>
                    <el-table-column prop label="操作" width="100">
                        <template slot-scope="scope">
              <span @click="editGjqy(scope.row)" class="cursor">
                <img src="../../assets/image/sjlr/编辑_on.png"/>
              </span>
                            <span
                                    @click.prevent="DelectRow(scope.row)"
                                    class="normalColor cursor"
                            >
                <img src="../../assets/image/sjlr/删除_on.png" alt/>
              </span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <pages :page="page" @changePage="changePage1"></pages>
                </div>
            </div>
        </div>
        <div class="gjqyDetailAdd" v-if="!TableShow">
            <el-form ref="form" :model="form" label-width="180px" style="height: 100%">
                <div class=" txsxstyle">
                    <span class="style_title">基本信息</span>
                    <div class="txsxstyle_box">
                        <div class="formBox">
                            <el-form-item
                                    v-for="(item, index) in form.jbsxArr"
                                    :label="item.sxmc"
                                    :key="index"
                                    :prop="'jbsxArr.' + index + '.sxvalue'"
                                    :rules="checkRules(item)"
                            >
                                <el-input
                                        class="noBg border1"
                                        v-show="item.sxlx == 0 || item.sxlx == 4 || item.sxlx == 5"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                ></el-input>
                                <el-select
                                        class="noBg border1"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                        v-show="item.sxlx == 1"
                                        placeholder="请选择"
                                >
                                    <el-option
                                            v-for="option in item.selectOption"
                                            :key="option.zdID"
                                            :label="option.zdmc"
                                            :value="option.zdID"
                                    ></el-option>
                                </el-select>

                                <el-date-picker
                                        class="noBg border1"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                        v-show="item.sxlx == 2"
                                        type="datetime"
                                        format="yyyy-MM-dd HH:mm:ss"
                                        value-format="timestamp"
                                        placeholder="选择日期"
                                ></el-date-picker>
                            </el-form-item>
                        </div>
                    </div>
                </div>
            </el-form>

            <div class="textRight mt20">
                <el-button
                        class="btnDefault"
                        @click="submitGJQYSelect"
                >保存
                </el-button>
                <el-button
                        class="btnDefault"
                        @click="backList"
                >取消
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
  import "../../assets/css/global.css";
  import pages from "../base/pages";
  import { baseServe } from "../../request/api";

  export default {
    name: "gjqy",
    data() {
      return {
        form: {
          jbsxArr: [
            {"sxvalue":"", "sxID": "yxlx", "sxmc": "演习类型", "sxlx": "1", "selectOption":[{zdmc:'组织演习',zdID:'10001'},{zdmc:'参加演习',zdID:'10002'}],"description": null, "sxzd": "yxlx", "isbt": "1" },
            {"sxvalue":"", "sxID": "yxnr", "sxmc": "演习内容", "sxlx": "0", "description": null, "sxzd": "yxnr", "isbt": "1" },
            {"sxvalue":"", "sxID": "yxkssj", "sxmc": "演习开始时间", "sxlx": "2", "description": null, "sxzd": "yxkssj", "isbt": "1" },
            {"sxvalue":"", "sxID": "yxjssj", "sxmc": "演习结束时间", "sxlx": "2", "description": null, "sxzd": "yxjssj", "isbt": "1" },
            {"sxvalue":"", "sxID": "cyrs", "sxmc": "参演人次", "sxlx": "4", "description": null, "sxzd": "cyrs", "isbt": "1" },
            {"sxvalue":"", "sxID": "yxpj", "sxmc": "演习评价", "sxlx": "0", "description": null, "sxzd": "yxpj", "isbt": "1" },
            {"sxvalue":"", "sxID": "cjsj", "sxmc": "采集时间", "sxlx": "2", "description": null, "sxzd": "cjsj", "isbt": "0" },
            {"sxvalue":"", "sxID": "gxsj", "sxmc": "更新时间", "sxlx": "2", "description": null, "sxzd": "gxsj", "isbt": "0" },
            {"sxvalue":"", "sxID": "yxmc", "sxmc": "演习名称", "sxlx": "0", "description": null, "sxzd": "yxmc", "isbt": "0" },
            {"sxvalue":"", "sxID": "bz", "sxmc": "备注", "sxlx": "0", "description": null, "sxzd": "bz", "isbt": "0" },
          ]
        },
        TableShow: true,
        page: {
          //总条数
          total: 0,
          //每页条数
          limit: 10,
          //当前页数
          currentPage: 1,
          pageSizes: [5, 10]
        },
        tableData: [],
        sliceData: [],
        selectRowArr: []
      };
    },
    mounted() {
      this.getTableByType();
    },
    computed: {
      zyjjmbId() {
        return this.$store.state.zyjjmbId;
      },
      tyclId() {
        return this.$store.state.detailTypeId;
      }
    },
    methods: {
      DelectRow(row) {
        this.$confirm("此操作将删除该项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            baseServe.deleteyxqk({ yxqkID: row.yxqkid }).then(() => {
              this.getTableByType();
              this.$message({ type: "success", message: "删除成功" });
            });
          });
      },
      DelectSelectRow() {
        let arr = [];
        for (let i = 0; i < this.selectRowArr.length; i++) {
          let target = this.selectRowArr[i].yxqkid;
          arr.push(target);
        }
        //this.DelectRow({ yxqkid: arr.join(",") });
        if(arr.length==0){
          this.$message({ type: "warning", message: "请先勾选需要删除的数据" });
          return
        }
        this.$confirm("此操作将批量删除选择项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            baseServe.deleteyxqk({ yxqkID:arr.join(",")}).then(() => {
              this.getTableByType();
              this.$message({ type: "success", message: "删除成功" });
            });
          });
      },
      selectionChange(val) {
        this.selectRowArr = val;
      },
      //判断校验规则
      checkRules(item) {
        let arr = [];
        if (item.isbt == "1") {
          arr.push({ required: true, message: "必填字段", trigger: "blur" });
        }
        if (item.sxlx == 0) {
          arr.push({ validator: this.checkStringLength, trigger: "blur" }); //验证字符长度30
        }
        if (item.sxlx == 4) {
          arr.push({ validator: this.checkNum, trigger: "blur" }); //验证正整数
        }
        if (item.sxlx == 5) {
          arr.push({ validator: this.checkNumber, trigger: "blur" });//验证小数
        }
        return arr;
      },
      getGjqysxValue() {
        baseServe.searchOneInfo({
          queryType: "yxqk",
          lxId: this.tyclId
        }).then(res => {
          if (res.data.yxqkModel) {
            let jbsxArrClone =  this.form.jbsxArr;
            jbsxArrClone.map((v) => {
              for (let k in res.data.yxqkModel) {
                if (k == v.sxzd) {
                  v.sxvalue = res.data.yxqkModel[k];
                  if (v.sxlx == 2 && v.sxvalue) {
                    v.sxvalue = new Date(v.sxvalue).getTime();
                  }
                }
              }
            });
          }
        });
      },
      //提交
      submitGJQYSelect() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            let params = {};
            this.form.jbsxArr.map(v => {
              if (v.sxzd) {
                params[v.sxzd] = v.sxvalue;
              }
            });
            params.zyjjmbid = this.zyjjmbId;
            if (this.tyclId) {
              params.yxqkid = this.tyclId;
            }
            baseServe.updateyxqk(params).then(() => {
              this.getTableByType();
              this.showGJQYSelect();
              this.TableShow = true;
              this.$message({ type: "success", message: "保存成功" });
            });
          } else {
            this.$message({ type: "warning", message: "请按照规则填写选项" });
            return false;
          }
        });

      },
      //返回
      backList() {
        this.showGJQYSelect();
        this.TableShow = true;
      },
      //新增
      showGJQYSelect() {
        this.$store.state.detailTypeId = "";
        this.TableShow = false;
        this.form.jbsxArr=[
          {"sxvalue":"", "sxID": "yxlx", "sxmc": "演习类型", "sxlx": "1", "selectOption":[{zdmc:'组织演习',zdID:'10001'},{zdmc:'参加演习',zdID:'10002'}],"description": null, "sxzd": "yxlx", "isbt": "1" },
          {"sxvalue":"", "sxID": "yxnr", "sxmc": "演习内容", "sxlx": "0", "description": null, "sxzd": "yxnr", "isbt": "1" },
          {"sxvalue":"", "sxID": "yxkssj", "sxmc": "演习开始时间", "sxlx": "2", "description": null, "sxzd": "yxkssj", "isbt": "1" },
          {"sxvalue":"", "sxID": "yxjssj", "sxmc": "演习结束时间", "sxlx": "2", "description": null, "sxzd": "yxjssj", "isbt": "1" },
          {"sxvalue":"", "sxID": "cyrs", "sxmc": "参演人次", "sxlx": "4", "description": null, "sxzd": "cyrs", "isbt": "1" },
          {"sxvalue":"", "sxID": "yxpj", "sxmc": "演习评价", "sxlx": "0", "description": null, "sxzd": "yxpj", "isbt": "1" },
          {"sxvalue":"", "sxID": "cjsj", "sxmc": "采集时间", "sxlx": "2", "description": null, "sxzd": "cjsj", "isbt": "0" },
          {"sxvalue":"", "sxID": "gxsj", "sxmc": "更新时间", "sxlx": "2", "description": null, "sxzd": "gxsj", "isbt": "0" },
          {"sxvalue":"", "sxID": "yxmc", "sxmc": "演习名称", "sxlx": "0", "description": null, "sxzd": "yxmc", "isbt": "0" },
          {"sxvalue":"", "sxID": "bz", "sxmc": "备注", "sxlx": "0", "description": null, "sxzd": "bz", "isbt": "0" },
        ]
      },
      //编辑
      editGjqy(row) {
        this.$store.state.detailTypeId = row.yxqkid;
        if (this.tyclId) {
          this.TableShow = false;
          this.getGjqysxValue();
        }
      },
      //获取表格
      getTableByType() {
        baseServe
          .getGjqyTable({
            queryType: "xlyl",
            zyjjmbId: this.zyjjmbId
          })
          .then(res => {
            if (res.data.xlylInfo && res.data.xlylInfo.yxqkInfos) {
              this.tableData = res.data.xlylInfo.yxqkInfos;
              this.page.total = this.tableData.length;
              this.page.currentPage=1
              this.pages();
            }
          });
      },
      //前台分页
      pages() {
        this.page.total = this.tableData.length;
        if (!this.page.total % this.page.limit) {
          this.page.currentPage = this.page.currentPage - 1;
        }
        let begin = (this.page.currentPage - 1) * this.page.limit;
        let end = this.page.currentPage * this.page.limit;
        this.sliceData = this.tableData.slice(begin, end);
      },
      changePage1(data) {
        this.page = data;
        this.pages();
      }
    },
    components: {
      pages
    }
  };
</script>

<style lang="less" scoped>
    .fhgc .gjqyDetailAdd .txsxstyle {
        height: 100%;
    }
</style>
